let graphs = {}; //缓存图形,维护图形与颜色对应的ANGLE_instanced_arrays
var canvas = document.getElementById("canvas");
var hideCanvas = document.getElementById("hideCanvas");

var ctx = canvas.getContext('2d');
var hideCtx = hideCanvas.getContext('2d');

hideCtx.width = ctx.width = canvas.width = hideCanvas.width = document.body.offsetWidth;
hideCtx.height = ctx.height = canvas.height = hideCanvas.height = document.body.offsetHeight;

let trianglePoint = [{x:75,y:50},{x:100,y:75},{x:100,y:25}];

let downFlag = false;// 是否按下
let selectedGraph = null; // 当前选中的图形的元素颜色

initDraw(ctx,hideCtx,trianglePoint,false,5,"#000000");

canvas.addEventListener("mousedown",function(e){
	let pointX = e.clientX;
	let pointY = e.clientY;
	const getHideColor = hideCtx.getImageData(pointX,pointY,1,1).data;
	const getHexColor = "#"+rgbToHex(getHideColor[0],getHideColor[1],getHideColor[2]);
	const graphsData = graphs[getHexColor];
	selectedGraph = getHexColor;
	downFlag = {
		lastPointX:pointX,
		lastPointY:pointY
	};
	if(!graphsData){
		return;
	}
	const {points,isFill,lineWidth,color} = graphsData;
	graphsData.color = '#ff00ff';
	drawGraph(ctx,hideCtx,points,isFill,lineWidth,getHexColor,graphsData.color);
},false);

const rgbToHex = (r, g, b) => ((r << 16) + (g << 8) + b).toString(16).padStart(6, '0');

canvas.addEventListener("mousemove",function(e){
	const graphsData = graphs[selectedGraph];
	if(!downFlag||!graphsData){ // 判断是否鼠标点击或者选中图形
		return;
	}
	let pointX = e.clientX,pointY = e.clientY;
	let { lastPointX,lastPointY } = downFlag;
	let distanceX = pointX - lastPointX,distanceY = pointY - lastPointY;
	let { points,isFill,lineWidth,color } = graphsData;
	let newPoints = points.map((val)=>{
		return {
			x:val.x + distanceX,
			y:val.y + distanceY
		}
	});//计算出新的点应该在的位置
	downFlag = {
		lastPointX:pointX,
		lastPointY:pointY
	}
	graphsData.points = newPoints;
	// console.log(ctx,hideCtx,newPoints,isFill,lineWidth,selectedGraph,color);
	drawGraph(ctx,hideCtx,newPoints,isFill,lineWidth,selectedGraph,color);
},false);
canvas.addEventListener("mouseup",function(e){
	let pointX = e.clientX;
	let pointY = e.clientY;
	const getHideColor = hideCtx.getImageData(pointX,pointY,1,1).data;
	const getHexColor = "#"+rgbToHex(getHideColor[0],getHideColor[1],getHideColor[2]);
	const graphsData = graphs[getHexColor];
	selectedGraph = getHexColor;
	downFlag = {
		lastPointX:pointX,
		lastPointY:pointY
	};
	if(!graphsData){
		return;
	}
	const {points,isFill,lineWidth,color} = graphsData;
	graphsData.color = '#000000';
	drawGraph(ctx,hideCtx,points,isFill,lineWidth,getHexColor,graphsData.color);
	downFlag = false;
},false)

function getRandomColor () {
  const rgb = []
  for (let i = 0 ; i < 3; ++i){
    let color = Math.floor(Math.random() * 256).toString(16)
    color = color.length == 1 ? '0' + color : color
    rgb.push(color)
  }
  return '#' + rgb.join('')
}

function initDraw(ctx,hideCtx,points,isFill,lineWidth,color){
	// 初始化图形及底色
	let roundColor = getRandomColor();
	console.log(graphs,roundColor);
	graphs[roundColor]?roundColor = getRandomColor():""; // 判断颜色是否已经使用过
	graphs[roundColor] = {
		points:points,
		color:color,
		isFill:isFill,
		lineWidth:lineWidth
	};
	drawGraph(ctx,hideCtx,points,isFill,lineWidth,roundColor,color);
}

function drawGraph(ctx,hideCtx,points,isFill,lineWidth,lowColor,color){
	console.log(ctx,hideCtx,points,isFill,lineWidth,lowColor,color);
	drawSingleGraph(ctx,points,isFill,lineWidth,color);
	drawSingleGraph(hideCtx,points,isFill,lineWidth+10,lowColor);
}

function drawSingleGraph(ctx,points,isFill,lineWidth,color){
	ctx.clearRect(0,0,ctx.width,ctx.height);
	ctx.save();//储存状态
	ctx.beginPath();
	color && (isFill?ctx.fillStyle = color:ctx.strokeStyle = color);
	ctx.lineWidth = lineWidth;
	ctx.lineJoin = 'miter';
	ctx.miterLimit = 5;
	points.forEach((point,index)=>{
		if(!index){
			ctx.moveTo(point.x,point.y);
		}else{
			ctx.lineTo(point.x,point.y);
		}
	})
	ctx.closePath();
	isFill ? ctx.fill():ctx.stroke();// 判断是否是填充
	ctx.restore();//恢复上一次的状态
}